import { OnInit, Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  template: `
    <h1 highlight>{{title}}</h1>
    <app-title [subtitle]="subtitle"></app-title>
    <p>The hero's birthday is {{ birthday | date }}</p>
    <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">popup</a>
    <nav>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
      <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
      <a routerLink="/admin" routerLinkActive="active">Admin</a>
      <a routerLink="/login" routerLinkActive="active">Login</a>
      <a routerLink="contact" routerLinkActive="active">Contact</a>
    </nav>

    <hero-form></hero-form>

    <p>---------------------------划分-----------------------</p>
    <router-outlet></router-outlet>
    <router-outlet name="popup"></router-outlet>
  `,
  styleUrls: ['./app.component.css'],
})
// 在类中定义组件的应用逻辑，为视图提供支持。
export class AppComponent {

  title = 'My First Angular App!';
  subtitle = '(v1)';
  birthday = new Date(1988, 3, 15); // April 15, 1988
}
